<template>
  <div class="body" :class="bodyStyle">
    <!-- 背景大垃圾桶 -->
    <div class="dustbin">
      <img :src="dustbinSrc" alt="">
    </div>
    <!-- 垃圾名字 -->
    <div class="wastename">
      <div class="backdrop" :style="{height:backdropHeiht+'rpx'}"></div>
      <div class="font">{{wasteName}}</div>
      <!-- <textarea auto-height placeholder="请输入" placeholder-style="color:#fff;" @input="inputWasteName" @linechange="textareaLineChange"
                @focus="focusTextarea" /> -->
    </div>

    <!-- 左边竖杠 -->
    <div class="brokenbar">
      <div class="big"></div>
      <div class="small"></div>
    </div>

    <!-- 左边圆 -->
    <div class="circular">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
    </div>

    <div class="body-center">
      <!-- 小垃圾筒 -->
      <div class="dustbinmini" @click="startSearch" :animation="dustbinminiAnt">
        <img :src="dustbinminiSrc" alt="">
      </div>

      <!-- 垃圾类 -->
      <div class="classify" v-if="isClicked">
        <div class="cn">{{classifyCnName}}</div>
        <div class="en">{{classifyEnName}}</div>
      </div>

      <div class="classifyicon" v-if="isClicked">
        <div v-for="(item,index) in classifyiconList1" :key="index">
          <span class="iconfont" :class="item.icon"></span>
          <div class="name">{{item.name}}</div>
        </div>
      </div>
      <div class="classifyicon" v-if="isClicked">
        <div v-for="(item,index) in classifyiconList2" :key="index">
          <span class="iconfont" :class="item.icon"></span>
          <div class="name">{{item.name}}</div>
        </div>
        <!-- <button plain='true' class='shareButton' @click="share">
          <image src='../../static/icon/share.png'></image>
        </button>
        <span class="shareFont">分享</span> -->
      </div>
    </div>

    <!-- 分享按钮 -->
    <div class="shareButton" @click="share">
      <image src='../../static/icon/share.png' /><span class="shareFont">分享</span>
    </div>

    <!--生成海报  -->
    <div class="posters" v-if="maskHidden"></div>
    <div class='imagePathBox' v-if="maskHidden">
      <image src="../../static/icon/close.png" class='colseShare' @click="closeShare"></image>
      <image :src="imagePath" class='shengcheng'></image>
      <button class='baocun' :class="bodyStyle" @click='baocun'>保存相册，分享到朋友圈</button>
    </div>
    <div class="canvas-box">
      <canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" />
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      backdropHeiht: 0, // 垃圾名背景阴影高度
      wasteName: '', // 垃圾名称
      dustbinminiSrc: '../../static/images/dustbin/gray-mini.png',
      dustbinSrc: '../../static/images/dustbin/gray.png',
      isClicked: false,
      bodyStyle: 'body-gray',
      classifyCnName: '',
      classifyEnName: '',
      classifyiconList1: [],
      classifyiconList2: [],
      dustbinminiAnt: '',
      maskHidden: false,
      imagePath: false
    }
  },

  onLoad (options) {
    this.flag = options.id
    this.wasteName = options.wasteName
    this.showStyle(this.flag)
    this.renderIcon(this.flag)
  },

  methods: {
    /**
     * 显示页面样式
     */
    showStyle (flag) {
      this.iconPath = '../../static/images/wasteyard/icon' + flag + '.png'
      switch (flag) {
        case '1':
          this.renderColor('blue')
          this.renderNavBarColor('#2ea7f8')
          this.classifyCnName = '可回收物'
          this.classifyEnName = 'RECYCLABLE WASTE'
          break
        case '2':
          this.renderColor('green')
          this.renderNavBarColor('#3dc571')
          this.classifyCnName = '干垃圾'
          this.classifyEnName = 'RESIDUAL WASTE'
          break
        case '3':
          this.renderColor('brown')
          this.renderNavBarColor('#fabd6d')
          this.classifyCnName = '湿垃圾'
          this.classifyEnName = 'HOUSEHOLD FOOD WASTE'
          break
        case '4':
          this.renderColor('red')
          this.renderNavBarColor('#fa6d80')
          this.classifyCnName = '有害垃圾'
          this.classifyEnName = 'HAZARDOUS WASTE'
          break
      }
    },

    renderColor (color) {
      this.dustbinminiSrc = '../../static/images/dustbin/' + color + '-mini.png'
      this.dustbinSrc = '../../static/images/dustbin/' + color + '.png'
      this.bodyStyle = 'body-' + color

      this.backdropHeiht = this.wasteName.length * 50 + 50
    },

    renderNavBarColor (color) {
      wx.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: color,
        animation: {
          duration: 400,
          timingFunc: 'easeIn'
        }
      })
    },

    renderIcon (id) {
      this.isClicked = true
      const classifyiconListOne = [
        [
          {
            icon: 'icon-kehuishouwu-zhiwulei',
            name: '织物类'
          },
          {
            icon: 'icon-kehuishouwu-jinshulei',
            name: '金属类'
          },
          {
            icon: 'icon-kehuishouwu-bolilei',
            name: '玻璃类'
          }
        ],
        [
          {
            icon: 'icon-qitalaji-wuranzhizhang',
            name: '污染纸张'
          },
          {
            icon: 'icon-qitalaji-chongwufenbian',
            name: '宠物粪便'
          },
          {
            icon: 'icon-qitalaji-pojiutaocipin',
            name: '破旧陶瓷'
          }
        ],
        [
          {
            icon: 'icon-chuyulaji-shengcaishengfan',
            name: '剩菜剩饭'
          },
          {
            icon: 'icon-chuyulaji-canzhilaye',
            name: '残枝落叶'
          },
          {
            icon: 'icon-chuyulaji-caigengcaiye',
            name: '菜梗菜叶'
          }
        ],
        [
          {
            icon: 'icon-youhailaji-guoqihuazhuangpin',
            name: '过期化妆品'
          },
          {
            icon: 'icon-youhailaji-feiqiwenduji',
            name: '废弃温度计'
          },
          {
            icon: 'icon-youhailaji-feijiuxiaojiadian',
            name: '废旧小家电'
          }
        ]
      ]

      const classifyiconListTwo = [
        [
          {
            icon: 'icon-kehuishouwu-feizhilei',
            name: '废纸类'
          },
          {
            icon: 'icon-kehuishouwu-niunaihe',
            name: '牛奶盒'
          },
          {
            icon: 'icon-kehuishouwu-suliaolei',
            name: '塑料类'
          }
        ],
        [
          {
            icon: 'icon-qitalaji-yantou',
            name: '烟头'
          },
          {
            icon: 'icon-qitalaji-nvxingweishengyongpin',
            name: '女性卫生用品'
          },
          {
            icon: 'icon-qitalaji-yicixingcanju',
            name: '一次性餐具'
          }
        ],
        [
          {
            icon: 'icon-chuyulaji-guopi',
            name: '果皮'
          },
          {
            icon: 'icon-chuyulaji-guoke',
            name: '果壳'
          },
          {
            icon: 'icon-chuyulaji-yugu',
            name: '鱼骨'
          }
        ],
        [
          {
            icon: 'icon-youhailaji-guoqiyaopin',
            name: '过期药品'
          },
          {
            icon: 'icon-youhailaji-xudianchi',
            name: '蓄电池'
          },
          {
            icon: 'icon-youhailaji-feijiudengpao',
            name: '废旧灯泡'
          }
        ]
      ]

      this.classifyiconList1 = classifyiconListOne[id - 1]
      this.classifyiconList2 = classifyiconListTwo[id - 1]
    },
    // canvas 绘制分享页面
    share () {
      this.maskHidden = false
      var that = this
      this.createNewImg()
      wx.showToast({
        title: '生成中...',
        icon: 'loading',
        duration: 1000
      })
      setTimeout(function () {
        wx.hideToast()
        that.maskHidden = true
      }, 1000)
    },
    // 将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
    createNewImg: function () {
      var that = this
      var context = wx.createCanvasContext('mycanvas')
      var title = this.wasteName
      // 绘制背景
      var bodyColor = ''
      var fontleft = ''
      var engfontleft = ''
      var backColor = ''
      switch (this.flag) {
        case '1':
          bodyColor = '#2ea7f8' // 可回收背景色
          fontleft = '125' // 中文字体距离左侧距离
          engfontleft = '117' // 英文字体距离左侧距离
          backColor = 'rgba(34,135,202,0.9)' // 右侧字体背景
          break
        case '2':
          bodyColor = '#3dc571' // 干垃圾背景色
          fontleft = '138' // 中文字体距离左侧距离
          engfontleft = '123' // 英文字体距离左侧距离
          backColor = 'rgba(42,164,89,0.9)' // 右侧字体背景
          break
        case '3':
          bodyColor = '#fabd6d' // 湿垃圾背景色
          fontleft = '138' // 中文字体距离左侧距离
          engfontleft = '95' // 英文字体距离左侧距离
          backColor = 'rgba(203,145,72,0.9)' // 右侧字体背景
          break
        case '4':
          bodyColor = '#fa6d80' // 有害垃圾背景色
          fontleft = '125' // 中文字体距离左侧距离
          engfontleft = '112' // 英文字体距离左侧距离
          backColor = 'rgba(203,72,87,0.9)' // 右侧字体背景
          break
      }
      context.setFillStyle(bodyColor)
      context.fillRect(0, 0, 375, 667)
      // 绘制左侧长线
      context.beginPath()
      context.setStrokeStyle('#860F19')
      context.setLineCap('round')
      context.setLineWidth(5)
      context.moveTo(22, 115)
      context.lineTo(22, 300)
      context.stroke()
      // 绘制左侧短线
      context.beginPath()
      context.setStrokeStyle('#860F19')
      context.setLineCap('round')
      context.setLineWidth(5)
      context.moveTo(22, 330)
      context.lineTo(22, 380)
      context.stroke()

      // 绘制右侧分类文字长方形背景
      context.rect(320, 38, 33, 45 + ((title.length - 1) * 35))
      context.setFillStyle(backColor)
      context.fill()

      for (var i = 0; i < title.length; i++) {
        // 绘制右侧文字
        context.beginPath()
        context.setFontSize(30)
        context.setFillStyle('#ffffff')
        context.fillText(title[i], 330, 70 + (i * 35))
      }

      // 绘制大垃圾桶图片
      context.globalAlpha = 0.1
      context.drawImage(this.dustbinSrc, 80, 200, 370, 550)
      context.globalAlpha = 1
      context.drawImage(this.dustbinminiSrc, 80, 60, 210, 260)

      // 绘制回收类别标题
      context.setFontSize(30)
      context.setFillStyle('#860F19')
      context.fillText(this.classifyCnName, fontleft, 385)

      // 绘制英文名称
      context.setFontSize(14)
      context.setFillStyle('#860F19')
      context.fillText(this.classifyEnName, engfontleft, 415)

      // 绘制二维码
      context.drawImage('../../static/canvasLogo/code.png', 300, 350, 55, 55)

      // 绘制垃圾分类案例名称
      context.setFontSize(15)
      context.setFillStyle('#860F19')
      var x = 0
      var y = 0
      switch (this.flag) {
        case '1':
          for (var p1 in this.classifyiconList1) {
            context.fillText(this.classifyiconList1[p1].name, 90 + x * 70, 520)
            x++
          }
          for (var q1 in this.classifyiconList2) {
            context.fillText(this.classifyiconList2[q1].name, 90 + y * 70, 620)
            y++
          }
          context.drawImage('../../static/canvasLogo/recycled/可回收物-织物类.png', 92, 445, 45, 50)
          context.drawImage('../../static/canvasLogo/recycled/可回收物-金属类.png', 162, 445, 45, 50)
          context.drawImage('../../static/canvasLogo/recycled/可回收物-玻璃类.png', 230, 445, 45, 50)
          context.drawImage('../../static/canvasLogo/recycled/可回收物-废纸类.png', 92, 545, 45, 50)
          context.drawImage('../../static/canvasLogo/recycled/可回收物-牛奶盒.png', 162, 545, 45, 50)
          context.drawImage('../../static/canvasLogo/recycled/可回收物-塑料类.png', 230, 545, 45, 50)
          break
        case '2':
          var leftWidth1 = [75, 160, 245]
          var leftWidth2 = [90, 140, 240]
          for (var p2 in this.classifyiconList1) {
            context.fillText(this.classifyiconList1[p2].name, leftWidth1[x], 520)
            x++
          }
          for (var q2 in this.classifyiconList2) {
            context.fillText(this.classifyiconList2[q2].name, leftWidth2[y], 620)
            y++
          }
          context.drawImage('../../static/canvasLogo/dry/其他垃圾-污染纸张.png', 83, 445, 45, 50)
          context.drawImage('../../static/canvasLogo/dry/其他垃圾-宠物粪便.png', 167, 445, 45, 50)
          context.drawImage('../../static/canvasLogo/dry/其他垃圾-破旧陶瓷品.png', 252, 445, 45, 50)
          context.drawImage('../../static/canvasLogo/dry/其他垃圾-烟头.png', 83, 545, 45, 50)
          context.drawImage('../../static/canvasLogo/dry/其他垃圾-女性卫生用品.png', 167, 545, 45, 50)
          context.drawImage('../../static/canvasLogo/dry/其他垃圾-一次性餐具.png', 252, 545, 45, 50)
          break
        case '3':
          for (var p3 in this.classifyiconList1) {
            context.fillText(this.classifyiconList1[p3].name, 70 + x * 90, 520)
            x++
          }
          for (var q3 in this.classifyiconList2) {
            context.fillText(this.classifyiconList2[q3].name, 84 + y * 90, 620)
            y++
          }
          context.drawImage('../../static/canvasLogo/wet/厨余垃圾-剩菜剩饭.png', 80, 445, 45, 50)
          context.drawImage('../../static/canvasLogo/wet/厨余垃圾-残枝落叶.png', 166, 445, 45, 50)
          context.drawImage('../../static/canvasLogo/wet/厨余垃圾-菜梗菜叶.png', 257, 445, 45, 50)
          context.drawImage('../../static/canvasLogo/wet/厨余垃圾-果皮.png', 80, 545, 45, 50)
          context.drawImage('../../static/canvasLogo/wet/厨余垃圾-果壳.png', 166, 545, 45, 50)
          context.drawImage('../../static/canvasLogo/wet/厨余垃圾-鱼骨.png', 257, 545, 45, 50)
          break
        case '4':
          for (var p4 in this.classifyiconList1) {
            context.fillText(this.classifyiconList1[p4].name, 60 + x * 90, 520)
            x++
          }
          for (var q4 in this.classifyiconList2) {
            context.fillText(this.classifyiconList2[q4].name, 70 + y * 90, 620)
            y++
          }
          context.drawImage('../../static/canvasLogo/harmful/有害垃圾-过期化妆品.png', 77, 445, 45, 50)
          context.drawImage('../../static/canvasLogo/harmful/有害垃圾-废弃温度计.png', 164, 445, 45, 50)
          context.drawImage('../../static/canvasLogo/harmful/有害垃圾-废旧小家电.png', 255, 445, 45, 50)
          context.drawImage('../../static/canvasLogo/harmful/有害垃圾-过期药品.png', 77, 545, 45, 50)
          context.drawImage('../../static/canvasLogo/harmful/有害垃圾-蓄电池.png', 164, 545, 45, 50)
          context.drawImage('../../static/canvasLogo/harmful/有害垃圾-废旧灯泡.png', 255, 545, 45, 50)
          break
      }

      // 绘制四个圆
      context.beginPath()
      context.fillStyle = '#2ea7f8'
      context.arc(25, 450, 12, 0, 2 * Math.PI)
      context.fill()
      context.stroke()

      context.beginPath()
      context.fillStyle = '#5ab089'
      context.arc(25, 490, 12, 0, 2 * Math.PI)
      context.fill()
      context.stroke()

      context.beginPath()
      context.fillStyle = '#c96241'
      context.arc(25, 530, 12, 0, 2 * Math.PI)
      context.fill()
      context.stroke()

      context.beginPath()
      context.fillStyle = '#d34249'
      context.arc(25, 570, 12, 0, 2 * Math.PI)
      context.fill()
      context.stroke()
      context.draw()

      // 将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
      setTimeout(function () {
        wx.canvasToTempFilePath({
          canvasId: 'mycanvas',
          success: function (res) {
            var tempFilePath = res.tempFilePath
            that.imagePath = tempFilePath
            that.canvasHidden = true
          },
          fail: function (res) {
            console.log(res)
          }
        })
      }, 600)
    },
    baocun () {
      var that = this
      wx.saveImageToPhotosAlbum({
        filePath: that.imagePath,
        success (res) {
          that.maskHidden = false
          wx.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 3000
          })
        }
      })
    },
    closeShare () {
      this.maskHidden = false
      this.imagePath = false
    }
  }
}
</script>

<style lang='less' scoped>
@import url(../../../static/icon/font_1m96mpubx4t/iconfont.css);

.body-gray {
  .body-style(#cecece, #686868);
}
.body-blue {
  .body-style(#2ea7f8, #0f5786);
}
.body-red {
  .body-style(#fa6d80, #860f19);
}
.body-brown {
  .body-style(#fabd6d, #864e0f);
}
.body-green {
  .body-style(#3dc571, #0d7036);
}

.body-style(@color1, @color2) {
  background: @color1;
  .brokenbar > div {
    background: @color2;
  }
  .wastename .backdrop {
    background: @color2;
  }
  .circular > div {
    border: 10rpx solid @color2;
  }
  .body-center {
    color: @color2;
  }
}

.body {
  height: 100vh;
  // background: #2ea7f8;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .iconfont {
    font-size: 110rpx;
  }
}

.dustbin {
  height: 1049rpx;
  width: 780rpx;
  position: absolute;
  bottom: -163rpx;
  left: 148rpx;
  opacity: 0.15;
  img {
    height: 100%;
    width: 100%;
  }
}

.brokenbar {
  position: absolute;
  top: 140rpx;
  left: 48rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  div {
    border-radius: 100rpx;
    background: #0f5786;
  }
  .big {
    height: 400rpx;
    width: 10rpx;
  }
  .small {
    margin-top: 20rpx;
    height: 100rpx;
    width: 10rpx;
  }
}

.circular {
  position: absolute;
  bottom: 100rpx;
  left: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  div {
    border-radius: 100%;
    // background: #0f5786;
    height: 35rpx;
    width: 35rpx;
    margin-top: 20rpx;
    border: 10rpx solid #0f5786;
  }
  .one {
    background: #2ea7f8;
  }
  .two {
    background: #5ab089;
  }
  .three {
    background: #c96241;
  }
  .four {
    background: #d34249;
  }
}

.wastename {
  position: absolute;
  top: 30rpx;
  right: 60rpx;
  // left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .backdrop {
    height: 150rpx;
    min-height: 200rpx;
    width: 60rpx;
    // background: rgb(13, 97, 165);
    opacity: 0.4;
  }
  textarea {
    min-height: 200rpx;
    margin-left: -80rpx;
    font-size: 50rpx;
    width: 50rpx;
    font-weight: bold;
    color: #fff;
  }
  .font {
    color: #fff;
    margin-left: -40rpx;
    font-size: 50rpx;
    font-weight: bold;
    width: 50rpx;
    z-index: 1;
    line-height: 1.2;
  }
}

.body-center {
  margin-top: -80rpx;
  color: #0f5786;
  text-align: center;
  z-index: 1;
  .dustbinmini {
    position: relative;
    img {
      height: 513rpx;
      width: 418rpx;
    }
  }

  .classify {
    margin: 30rpx 0;
    .cn {
      font-size: 55rpx;
      font-weight: bold;
      letter-spacing: 13rpx;
      line-height: 90rpx;
    }
    .en {
      font-size: 24rpx;
    }
  }

  .classifyicon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
    .name {
      font-size: 24rpx;
      margin-top: -10rpx;
    }
  }
}

.shengcheng {
  width: 80%;
  height: 80%;
  position: fixed;
  top: 60rpx;
  left: 50%;
  margin-left: -40%;
  z-index: 10;
}

.baocun {
  display: block;
  width: 80%;
  height: 80rpx;
  padding: 0;
  line-height: 80rpx;
  text-align: center;
  position: fixed;
  bottom: 50rpx;
  left: 10%;
  color: #ffffff;
  font-size: 32rpx;
  border-radius: 44rpx;
  z-index: 20;
}
button[class="baocun"]::after {
  border: 0;
}
.colseShare {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 41rpx;
  top: 26rpx;
  z-index: 20;
}

.shareButton {
  position: absolute;
  bottom: 60rpx;
  right: 10rpx;
  z-index: 2;
  display: flex;
  align-items: center;
  font-size: 24rpx;
  background: #fff;
  padding: 10rpx 25rpx;
  border-radius: 100rpx;
  box-shadow: 0 0 10rpx #3f3f3f;

  image {
    width: 40rpx;
    height: 40rpx;
  }
  .shareFont {
    margin-left: 10rpx;
  }
}

.posters {
  background-color: gray;
  left: 0;
  opacity: 0.7;
  position: absolute;
  top: 0;
  z-index: 10;
  filter: alpha(opacity=50);
  width: 100%;
  height: 100%;
}
</style>
